<template>
	<div>
		<!-- 修改资金密码 -->
		<nut-form label-position="top" :rules="rules" ref="routineRef" :model-value="routineFormData">
			<nut-form-item :label="t('home_page_oldPassword')" prop="old_password" :required="false">
				<nut-input
					v-model="routineFormData.old_password"
					:placeholder="t('home_page_enterOldPassword')"
					type="number"
					@input="validateInput"
					:class="[eyeOpen1 ? '' : 'text-security']"
					clearable
				>
					<template #right>
						<iconpark-icon
							@click="eyeOpen1 = !eyeOpen1"
							:color="eyeOpen1 ? '#A8A8CA' : '#504F6F'"
							:icon-id="eyeOpen1 ? 'show' : 'hide'"
							size="1.3rem"
							class="mr-12"
						></iconpark-icon>
					</template>
				</nut-input>
			</nut-form-item>
			<nut-form-item :label="t('home_page_newPassword')" prop="new_password">
				<nut-input
					v-model="routineFormData.new_password"
					:placeholder="t('home_page_enterNewPassword')"
					type="number"
					@input="validateInput"
					:class="[eyeOpen2 ? '' : 'text-security']"
					clearable
				>
					<template #right>
						<iconpark-icon
							@click="eyeOpen2 = !eyeOpen2"
							:color="eyeOpen2 ? '#A8A8CA' : '#504F6F'"
							:icon-id="eyeOpen2 ? 'show' : 'hide'"
							size="1.3rem"
							class="mr-12"
						></iconpark-icon>
					</template>
				</nut-input>
			</nut-form-item>
			<nut-form-item :label="t('home_page_enterAgainNewPassword')" prop="new_password_confirm">
				<nut-input
					v-model="routineFormData.new_password_confirm"
					:placeholder="t('home_page_enterAgainNewPassword')"
          type="number"
					@input="validateInput"
					:class="[eyeOpen3 ? '' : 'text-security']"
					clearable
				>
					<template #right>
						<iconpark-icon
							@click="eyeOpen3 = !eyeOpen3"
							:color="eyeOpen3 ? '#A8A8CA' : '#504F6F'"
							:icon-id="eyeOpen3 ? 'show' : 'hide'"
							size="1.3rem"
							class="mr-12"
						></iconpark-icon>
					</template>
				</nut-input>
			</nut-form-item>
		</nut-form>
		<div class="submit_wrap">
			<nut-button class="submit" @click="submit">{{ t('btn_label_submit') }}</nut-button>
		</div>
	</div>
</template>
<script setup lang="ts">
import { routineFormData, routineRef, roleInfo, securityshowToast, toast_value } from '../../commonHooks';
import PKwebsocket from '@/lolo/Ws';
import { NetPacket } from '@/netBase/NetPacket';
import { useI18n } from 'vue-i18n';
import { WithdrawValidator, againWithdrawValidator } from '../../validator';
import { ref } from 'vue';

const { t } = useI18n();

const eyeOpen1 = ref(false);
const eyeOpen2 = ref(false);
const eyeOpen3 = ref(false);

const rules = {
	old_password: [{ validator: WithdrawValidator }],
	new_password: [{ validator: WithdrawValidator }],
	new_password_confirm: [
		{
			validator: (val: any) => {
				return againWithdrawValidator(val, routineFormData.value.new_password);
			},
		},
	],
};



// 限制只能输入输入数字
const validateInput = () => {
	routineFormData.value.old_password = routineFormData.value.old_password.replace(/[^0-9]/g, '').slice(0, 8);
	routineFormData.value.new_password = routineFormData.value.new_password.replace(/[^0-9]/g, '').slice(0, 8);
	routineFormData.value.new_password_confirm = routineFormData.value.new_password_confirm.replace(/[^0-9]/g, '').slice(0, 8);
};

const submit = () => {
	routineRef.value?.validate().then(({ valid, errors }: any) => {
		if (valid) {
			if (routineFormData.value.new_password == routineFormData.value.old_password) {
				securityshowToast.value = true;
				toast_value.value = t('withdraw_password_has_been_bound');
				return;
			}
			const query = NetPacket.req_bind_or_modify_withdraw_password();
			query.new_password = routineFormData.value.new_password;
			query.old_password = routineFormData.value.old_password;
			query.new_password_confirm = routineFormData.value.new_password_confirm;
			query.operate_type = 2;
			query.step = 0;
			query.role_id = Number(roleInfo.value?.id);
			PKwebsocket.instance.send(query, true);
		} else {
			console.warn('error:', errors);
		}
	});
};
</script>


<style lang="scss" scoped>
.submit_wrap{
margin-bottom: 26px;
}


</style>